<template>
	<view class="index">
		<u-navbar :is-back="false" title=" " title-color="#fff" :background="background">
			<view class="navbarBox">
				<image src="/static/image/logoW.png"></image>
			</view>
		</u-navbar>
		<view class="main">
			<Eyesight ref="eyesight" />
			<Grid />
		</view>
	</view>
</template>

<script>
	import { get } from '../../utils/storage'
	import { mapState, mapMutations } from 'vuex'
	import Eyesight from './components/eyesight/index.vue'
	import Grid from './components/grid/index.vue'

	export default {
		components: {
			Eyesight,
			Grid
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, #34c868, #005e66)'
				}
			}
		},
		onLoad() {
			this.loginCheck()
		},
		onShow() {
			if (this.openId && this.parentId) {
				// 获取基本信息
				this.$refs.eyesight.getInit()
			}
		},
		computed: {
			...mapState(['phone', 'parentId']),
			openId() { return get('openId') }
		},
		methods: {
			...mapMutations(['login']),
			// 登录验证
			async loginCheck() {
				if (this.openId) {
					// 获取用户信息
					const getParent = await this.$http.post('/parent/get', {
						openId: this.openId
					}).then(res => res.data)
					// 保存用户信息
					uni.showToast({
						title: '登录成功',
						position: 'bottom',
						icon: 'none'
					})
					this.login(getParent)
					// 获取基本信息
					this.$refs.eyesight.getInit()
				} else {
					// 登录跳转
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.index {
		.navbarBox {
			image {
				height: 50rpx;
				width: 286rpx;
				margin-left: 40rpx;
			}
		}
		.main {
			position: relative;
		}
	}
</style>
